﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .dv-calendar {
            margin: 0 auto;
            border: 2px solid #59acff;
            width: 400px;
            padding: 5px;
        }

        .dv-search {
            margin-bottom: 5px;
            height: 25px;
        }

        .dv-search div {
            float: left;
            margin-right: 10px;
        }

        .dv-search select {
            line-height: 20px;
            height: 20px;
        }

        .dv-table {
            border-top: 1px solid #59acff;
        }

        th {
            font-weight: 200;
        }

        .td-weekend {
            color: #fe2e01;
        }

        td {
            padding: 2px;
            margin: 0;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border: 2px solid #ffffff;
        }

        .sp-regInfo {
            display: block;
            color: #fe2e01;
            font-size: 11px;
        }

        .td-SeparateLine {
            border-top: 1px solid #ccc;
            height: 1px;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="dv-calendar ">
        <div class="dv-search">
            <select class="form-control" name="selDate" id="selYear">
                <option>2019年</option>
                <option>2018年</option>
                <option>2017年</option>
            </select>
            <select class="form-control" name="selDate" id="selMonth">
                <option>1月</option>
                <option>2月</option>
                <option>3月</option>
            </select>
        </div>
        <div class="dv-table">
            <table style="width:100%;">
                <thead>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th class="td-weekend">六</th>
                    <th class="td-weekend">日</th>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="7" class="td-SeparateLine"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="td-enable"><span>1</span><span class="sp-regInfo">0/2</span></td>
                        <td class="td-enable">2</td>
                        <td class="td-enable">3</td>
                        <td class="td-enable">4</td>
                        <td class="td-enable">5</td>
                        <td class="td-enable">6</td>
                    </tr>
                    <tr>
                        <td colspan="7" class="td-SeparateLine"></td>
                    </tr>
                    <tr>
                        <td class="td-enable">7</td>
                        <td class="td-enable">8</td>
                        <td class="td-enable">9</td>
                        <td class="td-enable">10</td>
                        <td class="td-enable">11</td>
                        <td class="td-enable">12</td>
                        <td class="td-enable">13</td>
                    </tr>
                    <tr>
                        <td colspan="7" class="td-SeparateLine"></td>
                    </tr>
                    <tr>
                        <td class="td-enable">14</td>
                        <td class="td-enable">15</td>
                        <td class="td-enable">16</td>
                        <td class="td-enable">17</td>
                        <td class="td-enable">18</td>
                        <td class="td-enable">19</td>
                        <td class="td-enable">20</td>
                    </tr>
                    <tr>
                        <td colspan="7" class="td-SeparateLine"></td>
                    </tr>
                    <tr>
                        <td class="td-enable">21</td>
                        <td class="td-enable">22</td>
                        <td class="td-enable">23</td>
                        <td class="td-enable">24</td>
                        <td class="td-enable">25</td>
                        <td class="td-enable">26</td>
                        <td class="td-enable">27</td>
                    </tr>
                    <tr>
                        <td colspan="7" class="td-SeparateLine"></td>
                    </tr>
                    <tr>
                        <td class="td-enable">28</td>
                        <td class="td-enable">29</td>
                        <td class="td-enable">30</td>
                        <td class="td-enable">31</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>
<script>
    $(function () {
        $(".td-enable").click(function () {
            $.each($(".td-enable"), function (index, item) {
                $(this).css("border", "2px solid #ffffff");
            });
            $(this).css("border", "2px solid #ffbb00");
        });

    });
</script>